Balises sémantiques
Pour construire visuellement une page web, on utilise massivement les boîtes comme la <div></div>.
Depuis HTML5, un certain nombre de nouvelles balises à été créé pour apporter de la sémantique à certaines boîtes importantes. Elles ont le même comportement et la même utilité que la div mais avec de la sémantique en plus.
Ces nouvelle balises sont :
<!-- Conteneur du contenu majoritaire de la page -->
<main></main>
<!-- Conteneur d'une section générique de la page (si le contenu est indépendant du contexte, plutôt utiliser <article>) -->
<section></section>
<!-- Conteneur des menus de navigation avec des liens -->
<nav></nav>
<!-- Conteneur ayant du contenu indépendant du reste de la page -->
<article></article>
<!-- Conteneur des blocs un peu à part sur la page dont le contenu n'a qu'un rapport indirect avec le contenu principal de la page (comme les sidebars sur le côté) -->
<aside></aside>
<!-- Conteneur des éléments d'en-tête des contenus (titre par exemple) -->
<header></header>
<!-- Conteneur des pieds de page des éléments (page, article, etc...) -->
<footer></footer>
Attention : les anciennes versions d'internet explorer ne supportent pas ces nouvelles div sémantiques. Il est possible de les faire fonctionner quand même grâce à ce code à mettre dans le head de la page :
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>